<!--历史数据-->
<template>
  <div class="ele-body">
    <!-- 搜索表单 -->
    <div class="block-interval">
      <a-card :bordered="false">
        <a-form layout="inline" :model="where">
          <a-row>
            <a-form-item label="对比时间1:">
              <a-date-picker v-model:value="where.oneDate" type="date" show-time format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
            </a-form-item>
            <a-form-item label="对比时间2:">
              <a-date-picker v-model:value="where.twoDate" type="date" show-time format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
            </a-form-item>
            <a-form-item class="ele-text-center">
              <a-space>
                <a-button type="primary" @click="reload">对比</a-button>
                <a-button @click="reset">重置</a-button>
              </a-space>
            </a-form-item>

          </a-row>
        </a-form>
      </a-card>

      <a-card
        :bordered="false"
        title="饮水量按小时数据对比"
        :body-style="{padding: '16px 6px 0 0'}">
        <v-chart
          ref="useWaterChart"
          style="height: 362px;"
          :option="useWaterChartOption"/>
      </a-card>
    </div>

  </div>
</template>

<script>
import { provide } from 'vue';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart, BarChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import 'echarts-wordcloud';
import { ChartTheme } from 'ele-admin-pro';
import moment from 'moment';
import {DeviceDrinkheatingHourConsumptionApi} from "@/api/property/drinkhearting/DeviceDrinkheatingHourConsumptionApi";


use([
  CanvasRenderer,
  LineChart,
  BarChart,
  GridComponent,
  TooltipComponent,
  LegendComponent
]);
provide(THEME_KEY, ChartTheme);

export default {
  name: 'DeviceDrinkheartingHourdataDiff',
  components: {
    VChart
  },
  props: {
    data: Object
  },
  async mounted() {
    this.getUseWaterData();
  },
  data() {
    return {
      // 表格搜索条件
      where: {"recordId" : this.data.recordId},
      useWaterData : {
        "yesterday" : [],
        "today" : [],
        "serialNameYesterday" : "昨日饮水量m³",
        "serialNameToday" : "今日饮水量m³",
      }
    }
  },
  computed: {
    useWaterChartOption() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: [this.useWaterData.serialNameYesterday, this.useWaterData.serialNameToday],
          right: 20
        },
        xAxis: {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          name : "小时",
          data : [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
        },
        yAxis: [
          {
            type: 'value',
            name: '饮水量',
            alignTicks: true,
            axisLine: {
              show: true
            },
            axisLabel: {
              formatter: '{value} m³'
            }
          }
        ],
        series: [
          {
            name: this.useWaterData.serialNameYesterday,
            type: 'bar',
            data: this.useWaterData.yesterday,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' m³';
              }
            },
          },
          {
            name: this.useWaterData.serialNameToday,
            type: 'bar',
            data: this.useWaterData.today,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' m³';
              }
            },
          }
        ]
      }
    }

  },
  methods: {
    /**
     * 搜索按钮
     *
     * @author cancan
     * @date 2022/03/05 14:48
     */
    reload() {
      this.getUseWaterData();
    },


    /**
     * 重置搜索
     *
     * @author cancan
     * @date 2022/03/05 14:48
     */
    reset() {
      this.where.recordId = this.data.recordId;
      this.where.oneDate = '';
      this.where.twoDate = '';
      this.$nextTick(() => {
        this.reload();
      });
    },



    getUseWaterData(){
      if (this.where.oneDate == null || this.where.oneDate == '') {
        this.where.oneDate = moment().subtract(1, 'days').format('YYYY-MM-DD');
      }
      if (this.where.twoDate == null || this.where.twoDate == '') {
        this.where.twoDate = moment().format('YYYY-MM-DD');
      }
      this.useWaterData.serialNameYesterday = this.where.oneDate;
      this.useWaterData.serialNameToday = this.where.twoDate;

      let yesterdayParams = {
        searchBeginTime : this.where.oneDate + " 00:00:00",
        searchEndTime : this.where.oneDate + " 23:59:59",
        recordId : this.data.recordId,
        "orderBy" : "todayhour",
        "sortBy" : "asc"
      };

      let todayParams = {
        searchBeginTime : this.where.twoDate + " 00:00:00",
        searchEndTime : this.where.twoDate + " 23:59:59",
        recordId : this.data.recordId,
        sortBy : "asc",
        orderBy : "todayhour"
      };
      let that = this;
      that.useWaterData.yesterday = [];
      that.useWaterData.today = [];

      Promise.all([
        DeviceDrinkheatingHourConsumptionApi.list(yesterdayParams),
        DeviceDrinkheatingHourConsumptionApi.list(todayParams)
      ]).then(function (resArr){
        let yesterdayResultData = resArr[0];
        let todayResultData = resArr[1];
        //昨天数据
        let yesterdayMap = new Map()//创建一个空的Map
        if (yesterdayResultData && yesterdayResultData.length > 0) {
          yesterdayResultData.forEach(function (item) {
            let timeIndex = parseInt((item.todayhour + "").substr(8));
            yesterdayMap.set(timeIndex, ((item.influentFlowTotal - item.effluentFlowTotal) * 0.01).toFixed(2));
          });
        }

        for (let i=0; i < 24;i++) {
          if (yesterdayMap.get(i) == undefined) {
            that.useWaterData.yesterday.push(0);
          } else {
            that.useWaterData.yesterday.push(yesterdayMap.get(i));
          }
        }

        //今天数据
        let todayMap = new Map()//创建一个空的Map
        if (todayResultData && todayResultData.length > 0) {
          todayResultData.forEach(function(item) {
            let timeIndex = parseInt((item.todayhour + "").substr(8));
            todayMap.set(timeIndex, ((item.influentFlowTotal - item.effluentFlowTotal) * 0.01).toFixed(2));
          });
        }
        for (let i=0; i < 24;i++) {
          if (todayMap.get(i) == undefined) {
            that.useWaterData.today.push(0);
          } else {
            that.useWaterData.today.push(todayMap.get(i));
          }
        }

      });
    },
    activated() {
      ['useWaterChart'].forEach((name) => {
        this.$refs[name].resize();
      });
    }
  }
};
</script>
